<script setup lang="ts">
import type { recomment } from '@/types';
import { getBookImageUrl } from '@/utils';
import { computed } from 'vue';
import Row from './Row.vue';

const recommentForm = defineModel<recomment>({ required: true });
const emit = defineEmits(['commentId', 'comment-submitted']);
const dialogRecommentVisible1 = defineModel<boolean>('recommentDialog');

const imageUrls = computed(() => {
  return recommentForm.value.img_list.split(',').map((imgName) => getBookImageUrl(imgName));
});
</script>

<template>
  <el-dialog title="追评信息" v-model="dialogRecommentVisible1" width="50%" draggable overflow>
    <div class="row-container">
      <Row label="书本名称:" :content="recommentForm.book_name" />
      <Row label="交易日期:" :content="recommentForm.transaction_date" />
      <div class="demo-image__preview">
        <span class="label">追评图片:</span>
        <div class="image-container">
          <el-image
            v-for="(img, index) in imageUrls"
            :key="index"
            style="width: 100px; height: 100px; margin-right: 10px"
            :src="img"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="imageUrls"
            :initial-index="index"
            fit="cover"
          />
        </div>
      </div>
      <div class="rate-container">
        <span class="label">评价等级:</span>
        <el-rate
          v-model="recommentForm.rate"
          :texts="['重开吧', '真心一般', '就那样', '有点东西', '牛杯666']"
          show-text
          disabled
        ></el-rate>
      </div>
      <div class="row">
        <span class="label">评价内容:</span>
        <span class="content">{{ recommentForm.content }}</span>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
.row-container {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 间距 */
  padding: 20px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  color: #555;
}

.content {
  flex: 1;
  word-break: break-word;
}

.row {
  display: flex;
  align-items: center;
}

.demo-image__preview {
  display: flex;
  align-items: center;
  gap: 10px; /* 间距 */
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 间距 */
}

.rate-container {
  display: flex;
  align-items: center;
  gap: 10px; /* 间距 */
}

.el-rate {
  margin-left: 10px;
}

/* 对话框标题样式 */
.el-dialog__title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 对话框内容区域样式 */
.el-dialog__body {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}
</style>
